import { ExternalLink } from 'lucide-react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { SensorTierBadge, SignificanceBadge, StatusBadge } from '@/components/ui/badges';
import { KV, Row } from '@/components/ui/key-value';
import { LiveAgo } from '@/components/ui/live';
import { Container, Empty, Note, Stat, StatGrid } from '@/components/ui/section';
import { api, ApiError, safe } from '@/lib/api';
import { fmtDateTime, fmtDuration, fmtInt, fmtScore } from '@/lib/format';
import { routes, SENSOR_TIER_LABELS, SURFACE_LABELS } from '@/lib/site';

export const revalidate = 60;
export const metadata: Metadata = { title: 'Sensor', robots: { index: false } };

export default async function SensorPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  let s;
  try {
    s = await api.sensor(id);
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    throw e;
  }
  const [snaps, changes] = await Promise.all([safe(api.sensorSnapshots(id, 50)), safe(api.sensorChanges(id, 50))]);
  const stale = s.last_success_at && Date.now() - new Date(s.last_success_at).getTime() > 2 * 86_400_000;
  return (
    <Container>
      <div className="pb-4 pt-6 md:pt-10">
        <p className="eyebrow flex flex-wrap items-center gap-2">
          Sensor <StatusBadge status={s.status} /> <SensorTierBadge tier={s.tier} withLabel />
        </p>
        <h1 className="display mt-2 text-[24px] md:text-[32px]">
          <Link href={routes.company(s.company.slug)} className="hover:text-accent">
            {s.company.display_name}
          </Link>{' '}
          <span className="text-ink-3">·</span> {SURFACE_LABELS[s.surface] ?? s.surface}
        </h1>
        <p className="mt-2 text-sm">
          <a href={s.url} target="_blank" rel="noopener noreferrer" className="link mono inline-flex items-center gap-1 break-all text-xs">
            {s.url} <ExternalLink className="size-3 shrink-0" aria-hidden />
          </a>
        </p>
        {stale && (
          <p className="mt-2 text-sm text-warning" role="status">
            Last successfully checked <LiveAgo at={s.last_success_at} tick={30000} />
            {s.last_failure_class ? ` — recent failures: ${s.last_failure_class} (${s.consecutive_failures} consecutive)` : ''}.
          </p>
        )}
      </div>
      <StatGrid cols={6}>
        <Stat label="Observations" value={fmtInt(s.observation_count)} size="sm" />
        <Stat label="Snapshots" value={fmtInt(s.snapshot_count)} size="sm" />
        <Stat label="Changes" value={fmtInt(s.change_count)} hint={`${fmtInt(s.meaningful_change_count)} meaningful`} size="sm" />
        <Stat label="Events" value={fmtInt(s.event_count)} size="sm" />
        <Stat label="Quality" value={fmtScore(s.quality_score)} size="sm" />
        <Stat label="Interval" value={fmtDuration(s.current_interval_s)} hint={`tier ${s.tier} · ${SENSOR_TIER_LABELS[s.tier] ?? ''}`} size="sm" />
      </StatGrid>
      <div className="mt-6 grid gap-8 lg:grid-cols-12">
        <div className="space-y-8 lg:col-span-8">
          <section>
            <p className="eyebrow mb-2">Snapshot versions</p>
            {!snaps ? (
              <Empty title="Snapshots unavailable." />
            ) : snaps.items.length === 0 ? (
              <Empty>No snapshot stored yet for this sensor.</Empty>
            ) : (
              <div className="table-scroll">
                <table className="data-table compact">
                  <thead>
                    <tr>
                      <th className="num">v</th>
                      <th>Fetched</th>
                      <th>Title</th>
                      <th className="num">Blocks</th>
                      <th className="num">Text</th>
                      <th>Hash</th>
                      <th>Diff</th>
                    </tr>
                  </thead>
                  <tbody>
                    {snaps.items.map((v, i) => {
                      const prev = snaps.items[i + 1];
                      return (
                        <tr key={v.id}>
                          <td className="num tnum">{v.version_no}</td>
                          <td className="tnum text-xs">
                            <Link href={routes.snapshot(v.id)} className="link">
                              {fmtDateTime(v.fetched_at)}
                            </Link>
                          </td>
                          <td className="wrap text-ink-2">{v.title ?? '—'}</td>
                          <td className="num tnum">{fmtInt(v.block_count)}</td>
                          <td className="num tnum">{fmtInt(v.text_length)}</td>
                          <td className="mono text-[11px] text-ink-3">{v.content_hash.replace('sha256:', '').slice(0, 10)}</td>
                          <td className="text-xs">{prev ? <Link href={routes.snapshotDiff(prev.id, v.id)} className="link">vs v{prev.version_no}</Link> : <span className="text-ink-3">first</span>}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </section>
          <section>
            <p className="eyebrow mb-2">Detected changes</p>
            {!changes ? (
              <Empty title="Changes unavailable." />
            ) : changes.items.length === 0 ? (
              <Empty>No change detected yet.</Empty>
            ) : (
              <ul className="divide-y divide-rule border-y border-rule text-sm">
                {changes.items.map((c) => (
                  <li key={c.id} className="flex flex-wrap items-center gap-2 py-2">
                    <SignificanceBadge value={c.significance} />
                    <Link href={routes.change(c.id)} className="link">
                      {fmtDateTime(c.detected_at)}
                    </Link>
                    <span className="tnum text-xs text-ink-3">
                      +{c.blocks_added} · −{c.blocks_removed} · ~{c.blocks_modified}
                    </span>
                    <span className="mono ml-auto text-[11px] text-ink-3">{c.kind}</span>
                  </li>
                ))}
              </ul>
            )}
          </section>
        </div>
        <aside className="lg:col-span-4">
          <KV>
            <Row k="Connector">
              <span className="mono text-xs">{s.connector_id}</span>
            </Row>
            <Row k="Domain">
              <span className="mono text-xs">{s.domain}</span>
            </Row>
            <Row k="Discovery">
              {s.discovery_method ?? '—'} <span className="text-xs text-ink-3">· confidence {Math.round(s.discovery_confidence * 100)} %</span>
            </Row>
            <Row k="Last run">
              <LiveAgo at={s.last_run_at} tick={10000} />
            </Row>
            <Row k="Last success">
              <LiveAgo at={s.last_success_at} tick={10000} />
            </Row>
            <Row k="Last change">
              <LiveAgo at={s.last_change_at} tick={30000} />
            </Row>
            <Row k="Next run">{fmtDateTime(s.next_run_at)}</Row>
            <Row k="Last status">
              <span className="tnum">{s.last_status ?? '—'}</span>
              {s.last_failure_class && <span className="mono ml-2 text-xs text-danger">{s.last_failure_class}</span>}
            </Row>
            <Row k="Created">{fmtDateTime(s.created_at)}</Row>
            <Row k="Id">
              <span className="mono text-xs break-all">{s.id}</span>
            </Row>
          </KV>
          <Note className="mt-4">A sensor is a deployed connector instance attached to one public URL. It never bypasses authentication or challenges; when a page moves, the auto-repair loop tries redirects, sitemaps and navigation before flagging it for review.</Note>
        </aside>
      </div>
    </Container>
  );
}